<template>
  <div class="tag-title">
    <span>{{ name }}:</span>
    <div class="title-row" v-for="(item, index) in titles" :key="item.id">
      <span
        style="
          cursor: pointer;
          padding: 5px 3px;
          display: inline-block;
          borderradius: 3px;
        "
        :class="[curIndex === index ? 'active' : '']"
        @click="changeOne(item.id, index)"
        >{{ item.type }}</span
      >
      <i style="paddingleft: 8px; color: #666">{{
        index === titles.length - 1 ? '' : '|'
      }}</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, withDefaults } from 'vue'

const emit = defineEmits(['changeClass'])

// const props = defineProps({
//   name: {
//     type: String,
//     default: '语种'
//   },
//   titles: {
//     type: Array,
//     default: () => []
//   }
// })

const props = withDefaults(
  defineProps<{
    name: string
    titles: any
  }>(),
  {
    name: '语种',
    titles: []
  }
)

const curIndex = ref(0)
const changeOne = (id: number | string, i: number) => {
  curIndex.value = i
  //告诉父组件切换了
  emit('changeClass', id)
}
</script>

<style scoped lang="less">
.tag-title {
  margin-top: 20px;

  span {
    margin: 0 8px;
    line-height: 1.5;
  }
  .title-row {
    display: inline-block;

    span.active {
      background: #bf9096;
      color: #f5f5f5;
    }
  }
}
</style>
